<template>
<div class="case-base-info">
  <div class="case-base-info-wrap">
    <div class="info-top">
      <h3 class="title">天元区张三丰被盗窃案<a>立案</a></h3>
      <div class="case-id">
        案件编号：<a>A440607201611091244411</a>
      </div>
      <div class="case-tags">
        <edit-tags size="mini"></edit-tags>
        
      </div>
      <el-button size="mini" type="primary">执法办案</el-button>
    </div>

    <div class="key-value-infos-table">
      <div class="table-item quarter" v-for="(item, index) in caseInfoState" :key="index"> 
        <strong class="label">{{item.prop}}</strong>
        <span class="value">{{item.value}}</span>
      </div>
      <div class="table-item half"> 
        <strong class="label">主题词</strong>
        <div class="value">
          <edit-tags :default-tags="['a', 'b', 'v']" size="small" :change-fn="changeFn"></edit-tags>
        </div>
      </div>
      <div class="table-item half"> 
        <strong class="label">特征词</strong>
        <div class="value">
          <edit-tags size="small"></edit-tags>
        </div>
      </div>
    </div>

    <div class="info-detail">
      <div class="detail">
        <strong>简单案情： </strong> 2018/12/21 下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗。把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来出来的时候发现车被盗下午2点陈明法来我队来的时报案.2018/12/21 下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗。把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来出来的时候发现车被盗下午2点陈明法来我队来的时报案.
      </div>
      <a class="show-more" @click="detailShowFull = true">....更多</a>
      <div class="detail-full" v-show="detailShowFull">
      <strong>简单案情： </strong> 2018/12/21 下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗。把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来出来的时候发现车被盗下午2点陈明法来我队来的时报案. 2018/12/21 下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗。把一辆XXX牌电动车停在小区里并上锁，到9点出来的时候发现车被盗下午2点陈明法来我队报案：2016/12/20上午8点把一辆XXX牌电动车停在小区里并上锁，到9点出来出来的时候发现车被盗下午2点陈明法来我队来的时报案.
      <a class="hide-more" @click="detailShowFull = false">隐藏</a>
      </div>
      
    </div>
    <div class="case-process">
      <div class="steps clearfix">
        <div class="step" v-for="i in 6" :key="i">
          <div class="date">2018-10-10</div>
          <div class="name">接受立案</div>
        </div>
      </div>
    </div>
  </div>
  <div class="case-base-img-wrap">
    <switch-image></switch-image>
  </div>
</div>
</template>

<style lang="scss" scoped>
@import "../../../../src/style/variables/_default.scss";
@import "../../../../src/style/_mixin.scss";
.case-base-info{
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  align-items: stretch;
  padding: 0 5px;
  background: white;
  box-shadow: 0 2px 3px 3px $--border-color-base;
  &-wrap{
    flex: 1;
    padding: 5px;
    .info-top{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      .title{
        flex: 0 1 auto;
        padding: 0;
        margin: 0;
        line-height: 2;
        >a{
          margin: 0 5px;
          padding: 2px 5px;
          font-size: 12px;
          border-radius: 3px;
          color: white;
          background: $--color-primary;
        }
      }
      .case-id{
        flex: 0 1 auto;
        margin: 0 15px;
        >a {
          color: $--color-primary;
        }
      }
      .case-tags{
        flex: 1;
        height: 24px;
      }

    }
    
    .info-detail{
      position: relative;
      padding: 10px 0 10px 0;
      border-top: 1px solid $--border-color-base;
      border-bottom: 1px solid $--border-color-base;
      .show-more{
        position: absolute;
        bottom: 10px;
        right: 8px;
        padding-left: 5px;
        background: white;
      }
      .detail{
        line-height: 20px;
        height: 60px;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow : hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        background: white;
      }
      .detail-full{
        position: absolute;
        width: 100%;
        left: 0;
        top: 10px;
        padding-bottom: 20px;
        box-shadow: 2px 2px 2px 0px $--border-color-base;
        background: white;
        z-index:3;
        .hide-more{
          position: absolute;
          bottom: 5px;
          right: 5px;
        }
      }
    }
    .case-process{
      padding: 30px 100px 10px 10px;
      .steps{
        // display: inline-block;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        border-top: 1px solid $--color-primary;
        .step{
          flex: 0 0 auto;
          position: relative;
          display: block;
          padding-top: 20px;
          text-align: center; 
          >div{
            line-height: 1.4;
          }
        }
        .step:after{
          content: '';
          position:absolute;
          display: block;
          left: 50%;
          top: -8px;
          margin-left: -5px;
          width: 10px;
          height: 10px;
          border: 3px solid $--color-primary;
          border-radius: 50%;
          background: white;
        }
        .step:nth-of-type(1):before{
          content: '';
          position:absolute;
          display: block;
          left: 0%;
          top: -1px;
          margin-left: -5px;
          width: 50px;
          height: 2px;
          background: white;
        }
      }
    }
  }
  .case-base-img-wrap{
    flex: 0 0 25%;
    width: 25%;
    max-width: 480px;
    min-width: 300px;
  }

  // .tags{
  //   position: relative;
  //   display: flex;
  //   flex-flow: row nowrap;
  //   align-items: center;
  //   height: 24px;
  //   line-height: 1.6;
  //   .show-all{
  //     display:none;
  //   }
  //   .all-tags{
  //     position: absolute;
  //     display:none;
  //     top: 0;
  //     left: 0;
  //     right: 146px;
  //     padding: 0 5px 5px 0;
  //     box-shadow: 2px 2px 2px 0px $--border-color-base;
  //     background: white;
  //     z-index: 4;
  //   }
  //   .wrap{
  //     height: 100%;
  //     overflow: hidden;
  //     min-width: 200px;
  //     max-width: calc(100% - 150px); 
       
  //   }
    
  //   .tag{
  //     display: inline-block;
  //     margin: 0 5px;
  //     padding: 0 5px;
  //     font-size: 12px;
  //     border-radius: 3px;
  //     border: 1px solid $--color-primary;
  //     &.more{
  //       // width:50px;
  //       color: white;
  //       background: $--color-primary;
  //     }
  //     &.edit{
  //       color: $--color-info;
  //       border: 1px dashed gray;
  //     }
  //   }
    
  //   .tag.more:hover + .all-tags{
  //     display: block;
  //   }
  //   .all-tags:hover{
  //     display: block;
  //   }
  // }
  
}
</style>

<script>
import SwitchImage from '@/components/common/switch-image'
import editTags from '@/components/common/edit-tags'
export default {
  name: 'caseBaseInfo',
  components: {
    SwitchImage,
    editTags
  },
  props: {
  },
  data() {
    return {
      detailShowFull: false,
      caseInfoState: [
        {prop: '案件性质', value: '入户盗窃'},
        {prop: '案件类别', value: '盗窃案'},
        {prop: '发案时间', value: '2016-10-10至2016-11-13'},
        {prop: '损失价值（人民币元）', value: '2万'},
        {prop: '受理时间', value: '2016-11-12 15:00'},
        {prop: '受理单位', value: '2016-11-12 15:00'},
        {prop: '发案地行政区划', value: '合肥庐阳区'},
        {prop: '死亡/受伤人数', value: '0/2'},
        {prop: '立案时间', value: '2016-11-12  15:04'},
        {prop: '立案单位', value: '安徽省合肥市xx刑侦大队'},
        {prop: '案发地点', value: '合肥市庐阳区XX街道XX小区'},
        {prop: '涉案场所', value: '合肥市庐阳区XX街道XX小区'},
        {prop: '组织形式', value: '共同作案'},
        {prop: '行为特点', value: 'XXXXXXX,XXXXXXX'},
        {prop: '作案范围', value: 'XXXXXXX,XXXXXXX'},
        {prop: '试探方式', value: 'XXXXXXX,XXXXXXX'}
      ]
    }
  },
  watch: {
    
  },
  methods: {
    changeFn(tags, vm) {
      console.log('outside', tags)
      console.log('outside this', this)
    }

  },
  mounted() {
  }
}
</script>

